<template>
  <div class="user-content">
    <div class="user-info-head" @click="editCropper()">
      <!-- <img :src="options.img" title="点击上传头像" class="img-circle img-lg" /> -->
      <div class="block">
        <el-image :src="img">
          <template #error>
            <div class="image-slot">
              <el-icon><icon-picture /></el-icon>
            </div>
          </template>
        </el-image>
      </div>
      <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
        <el-row>
          <el-col :xs="24" :md="12" :style="{ height: '350px' }">
            <vue-cropper
              ref="cropper"
              :img="img"
              :info="true"
              :autoCrop="autoCrop"
              :autoCropWidth="autoCropWidth"
              :autoCropHeight="autoCropHeight"
              :fixedBox="fixedBox"
              :outputType="outputType"
              @realTime="realTime"
              v-if="visible"
            />
          </el-col>
          <el-col :xs="24" :md="12" :style="{ height: '350px' }">
            <div class="avatar-upload-preview">
              <img :src="previews.url" :style="previews.img" />
            </div>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :lg="2" :md="2">
            <el-upload
              action="#"
              :http-request="requestUpload"
              :show-file-list="false"
              :before-upload="beforeUpload"
            >
              <el-button>
                <component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-upload-one'"/>选择
              </el-button>
            </el-upload>
          </el-col>
          <el-col :lg="{ span: 1, offset:2 }" :md="2">
            <el-button @click="changeScale(1)"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-plus'"/></el-button>
          </el-col>
          <el-col :lg="{ span: 1, offset: 1 }" :md="2">
            <el-button  @click="changeScale(-1)"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-minus'"/></el-button>
          </el-col>
          <el-col :lg="{ span: 1, offset: 1 }" :md="2">
            <el-button  @click="rotateLeft()"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-invert-left'"/></el-button>
          </el-col>
          <el-col :lg="{ span: 1, offset: 1 }" :md="2">
            <el-button  @click="rotateRight()"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-invert-right'"/></el-button>
          </el-col>
          <el-col :lg="{ span: 2, offset: 6 }" :md="2">
            <el-button type="primary" @click="uploadImg()"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-correct'"/>提 交</el-button>
          </el-col>
        </el-row>
      </el-dialog>
  </div>
</div>
</template>

<script >
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { useStore } from 'vuex';
export default defineComponent({
  components: { VueCropper },
  setup(props, context) {
    const store = useStore();
    const { proxy } = getCurrentInstance();

    const open = ref(false);
    const visible = ref(false);
    const title = ref("修改头像");

    //图片裁剪数据
    const options = reactive({
      img: store.getters['user/avatar'],     // 裁剪图片的地址
      autoCrop: true,            // 是否默认生成截图框
      autoCropWidth: 200,        // 默认生成截图框宽度
      autoCropHeight: 200,       // 默认生成截图框高度
      fixedBox: true,            // 固定截图框大小 不允许改变
      outputType: "png",         // 默认生成截图为PNG格式
      filename: 'avatar',        // 文件名称
      previews: {}               //预览数据
    });
    console.log(options, "options");
    const methods={
      /** 编辑头像 */
      editCropper() {
        open.value = true;
      },
      /** 打开弹出层结束时的回调 */
      modalOpened() {
        visible.value = true;
      },
      /** 覆盖默认上传行为 */
      requestUpload() {},
      /** 向左旋转 */
      rotateLeft() {
        proxy.$refs.cropper.rotateLeft();
      },
      /** 向右旋转 */
      rotateRight() {
        proxy.$refs.cropper.rotateRight();
      },
      /** 图片缩放 */
      changeScale(num) {
        num = num || 1;
        proxy.$refs.cropper.changeScale(num);
      },
      /** 上传预处理 */
      beforeUpload(file) {
        if (file.type.indexOf("image/") == -1) {
          proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            options.img = reader.result;
            options.filename = file.name;
          };
        }
      },
      /** 上传图片 */
      uploadImg() {
        proxy.$refs.cropper.getCropBlob(data => {
          let formData = new FormData();
          formData.append("avatarfile", data, options.filename);
          uploadAvatar(formData).then(response => {
            open.value = false;
            options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
            store.commit('user/setAvatar', options.img)
            //userStore.avatar = options.img;
            proxy.Success("修改成功");
            visible.value = false;
          });
        });
      },
      /** 实时预览 */
      realTime(data) {
        options.previews = data;
      },
      /** 关闭窗口 */
      closeDialog() {
        options.img = store.getters['user/avatar'];
        options.visible = false;
      }
    }
    return {
      open,
      visible,
      title,
      ...methods,
      ...toRefs(options)
    }
  } 
  })
</script>
<!-- .user-info-head:hover:after { -->
<style lang='scss' scoped>
:deep(.el-overlay-dialog){
  overflow: hidden !important;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
}
</style>
<style scoped>
.user-content {
  display: flex;
    justify-content: center;
    align-items: center;
} 
.el-image {
  /* padding: 0 5px; */
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
.avatar-upload-preview {
	position: absolute;
	top: 50%;
	transform: translate(50%, -50%);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	box-shadow: 0 0 4px #ccc;
	overflow: hidden;
}
</style>